---
title: 快速开始
description: 5分钟快速上手Web服务指南
---

快速指南，让您的langcrew应用中的Web服务快速运行起来。

LangCrew的Web模块将您的AI智能体转换为生产就绪的Web服务，支持实时流式通信。

:::tip[协议参考]
有关详细的通信协议规范、消息格式和API端点，请参阅[通信协议](/zh/guides/web/protocol)文档。
:::

## 快速开始 - 只需3行代码

只需3行代码即可让您的智能体作为Web服务运行：

```python
from langcrew import Agent, Crew
from langcrew.web import create_server

agent = Agent(role="助手", goal="帮助用户", backstory="有用的AI")
server = create_server(Crew(agents=[agent]))
server.run(port=8000)  # 访问 http://localhost:8000/docs
```

就是这样！您的智能体现在已经可以作为Web服务使用，并且有自动生成的API文档。

## 安装

Web服务已包含在langcrew中 - 无需额外安装：

```bash
uv add langcrew --prerelease=allow
```

## 详细示例

以下是不同用例的详细示例：

### 方式一：使用LangCrew

```python
from langcrew import Agent, Crew
from langcrew.web import create_server

# 创建智能体和团队
agent = Agent(
    role="Web助手",
    goal="通过Web界面帮助用户",
    backstory="您是一个有用的基于Web的AI助手",
    verbose=True
)

crew = Crew(agents=[agent])

# 创建并启动服务器
server = create_server(crew)

# 启动服务器
if __name__ == "__main__":
    print("正在启动Web服务器，地址：http://0.0.0.0:8000")
    server.run(host="0.0.0.0", port=8000)
```

### 方式二：使用LangGraph

```python
from langcrew.web import create_langgraph_server
from langgraph.graph import StateGraph

# 创建您的LangGraph工作流
def create_workflow():
    workflow = StateGraph()
    # 在这里添加您的节点和边
    return workflow.compile()

# 使用LangGraph创建服务器
compiled_graph = create_workflow()
server = create_langgraph_server(compiled_graph)

# 启动服务器
if __name__ == "__main__":
    print("正在启动LangGraph Web服务器，地址：http://0.0.0.0:8000")
    server.run(host="0.0.0.0", port=8000)
```

## 测试您的服务器

服务器运行后，您可以：

### 1. 使用内置Web UI

LangCrew提供了一个现成的基于React的Web界面：

```bash
# 导航到web目录
cd web/

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 在浏览器中打开 http://localhost:3600/chat
```

Web UI包括：

- **实时聊天界面**：带有输入指示器的流式响应
- **工具调用可视化**：实时查看智能体工具使用情况
- **文件上传支持**：上传文档进行分析
- **会话管理**：维护对话历史
- **现代React组件**：使用Antd + Tailwind CSS构建

:::tip[生产部署]
对于生产环境，运行 `pnpm build` 并使用您首选的Web服务器提供 `dist/` 目录服务。
:::

### 2. 访问API文档

访问 `http://localhost:8000/docs` 查看自动生成的API文档

### 3. 发送测试消息

```bash
# 开始新对话（不提供session_id）
curl -X POST "http://localhost:8000/api/v1/chat" \
     -H "Content-Type: application/json" \
     -d '{"message": "你好，你能帮我什么？"}'

# 继续现有对话
curl -X POST "http://localhost:8000/api/v1/chat" \
     -H "Content-Type: application/json" \
     -d '{
       "message": "能提供更多细节吗？",
       "session_id": "abc123def456789a"
     }'
```

### 4. 客户端流式示例

如果您需要在客户端处理流式响应：

```python
import requests
import json

# 开始新对话
response = requests.post('/api/v1/chat', json={
    "message": "你好，能帮我分析这个文档吗？"
    # session_id是可选的 - 新对话时可省略
}, stream=True)

session_id = None

# 处理流式响应
for line in response.iter_lines():
    if line:
        message = json.loads(line)
        print(f"接收到: {message['type']} - {message['content']}")
        
        # 从session_init消息中提取session_id
        if message['type'] == 'session_init':
            session_id = message['detail']['session_id']
            print(f"新会话已创建: {session_id}")

# 使用相同的session_id继续对话
if session_id:
    response = requests.post('/api/v1/chat', json={
        "message": "能提供更多细节吗？",
        "session_id": session_id
    }, stream=True)
    
    for line in response.iter_lines():
        if line:
            message = json.loads(line)
            print(f"接收到: {message['type']} - {message['content']}")
```

## 生产部署

### Docker Compose（推荐）

部署包含后端和前端的完整LangCrew的最简单方法：

```bash
# 从仓库根目录
export OPENAI_API_KEY=your-openai-key   # 或 ANTHROPIC_API_KEY / DASHSCOPE_API_KEY

# 可选配置
export LOG_LEVEL=info # debug|info|warning|error

# 启动服务
docker compose up --build
```

**可用端点：**

- **Web聊天界面**: [http://localhost:3600](http://localhost:3600)
- **后端API文档**: [http://localhost:8000/docs](http://localhost:8000/docs)

### 本地开发设置

**后端服务器：**

```bash
# 1. 配置API密钥
export OPENAI_API_KEY=your-openai-key   # 或 ANTHROPIC_API_KEY / DASHSCOPE_API_KEY

# 2. 运行服务器
cd examples/components/web/web_chat
uv run run_server.py
```

服务器将在 **[http://localhost:8000](http://localhost:8000)** 启动

**前端界面：**

```bash
# 1. 导航到web目录
cd web/

# 2. 安装依赖并启动开发服务器
pnpm install
pnpm dev
```

在浏览器中打开 **[http://localhost:3600/chat](http://localhost:3600/chat)**

## 下一步

- 在[通信协议](/zh/guides/web/protocol)中了解详细的消息格式
- 在[HTTP服务器](/zh/guides/web/http-server)中查看高级服务器配置
- 探索[Web UI组件](/zh/guides/web/ui-components)以进行自定义前端集成
